<template>
	<view>
		<van-checkbox-group :value="result" @change="onChange">
				<view class="checkbox-card-box flex-row"  v-for="(item,index) in shopcarList" :key="index">
					<view class="checkbox-box">
						<van-checkbox :name="index"></van-checkbox>
					</view>
					<van-card :price="item.goodsInfo.price" :desc="item.goodsInfo.description" :title="item.goodsInfo.name" :thumb="item.goodsInfo.picture"
					 class="card-box">
					</van-card>
					<view class="stepper-box">
						<text>￥{{item.totalPrice}}</text>
						<van-stepper :value="item.total" integer @change="stepperChange" :data-name="item.id" :max="item.goodsInfo.total" />
					</view>
				</view>
		</van-checkbox-group>

		<view class="bottom-out-box">
			<view class="common-width90 flex-just column-middle">
				<van-checkbox :value="checked" @change="selectAll">
					<label class="label-text">全选</label>
				</van-checkbox>
				<text class="text">共{{result.length}}件物品，合计{{totalPrice}}元</text>
				<van-button round type="info" size="small" @click="buyByShopcar()">订购</van-button>
				<van-button round color="#CB2D4E" size="small" @click="deleteCommodity()">删除</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShopcarList,
		updateShopcarNum,
		buyByShopcar,
		deleteSomeCommodity,
		deleteAllCommodity
	} from '@/common/api/groceryStore/shopcar.js'
	export default {
		data() {
			return {
				result: [],
				url: '/static/corporation/groceryStore/club_logo.jpg',
				checked: false,
				shopcarList: [],
				map: new Map(),
				totalPrice: 0,
				// 选中的商品的编号
				cartIdList: []
			}
		},
		methods: {
			// 点击是否选择该商品
			onChange(event) {
				var that = this
				this.result = event.detail
				this.totalPrice = 0
				that.cartIdList = []
				this.result.forEach(function(item,index){
					that.shopcarList.forEach(function(item2,index2){
						if(item == index2){
							that.totalPrice = that.totalPrice + item2.totalPrice
							that.cartIdList.push(item2.id)
						}
					})
				})
				if(this.result.length == this.shopcarList.length) {
					this.checked = true
				} else {
					this.checked = false
				}
				console.log(this.cartIdList)
			},
			// 点击是否全选
			selectAll(e){
				var that = this
				this.checked = e.detail
				this.totalPrice = 0
				that.cartIdList = []
				// 当点击了全选
				if(this.checked) {
					this.result = []
					this.shopcarList.forEach(function(item,index){
						// 由于name的是string型，所以要转换为string型
						that.result.push('' + index)
						that.totalPrice += item.totalPrice
						that.cartIdList.push(item.id)
					})
				} else {
					this.result = []
				}
			},
			// 获取购物车列表
			getShopcarList: function() {
				uni.showLoading({
					title: '加载中'
				})
				var that = this
				this.shopcarList  = []
				getShopcarList(uni.getStorageSync("memberId")).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.length != 0) {
							res.data.data.forEach(function(item, index) {
								that.shopcarList.push({
									id: item.id,
									goodsInfo: item.goodsInfo,
									total: item.total,
									totalPrice: item.goodsInfo.price * item.total
								})
								uni.hideLoading()
							})
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '购物车暂时没有东西',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 步进器改变数据
			stepperChange: function(e) {
				let stepperNum = e.detail
				let shopcarId = e.currentTarget.dataset.name
				// key为购物车的id号，value为步进器的数量
				this.map.set(shopcarId, e.detail)
				this.shopcarList.forEach(function(item,index) {
					if(shopcarId == item.id) {
						item.totalPrice = item.totalPrice * e.detail
					}
				})
				this.updateShopcarNum(shopcarId,stepperNum)
			},
			// 修改购物车的商品的数量
			updateShopcarNum:function(shopcarId,total) {
				updateShopcarNum(shopcarId,total).then(res => {
					if(res.data.code == 200) {
						console.log("修改成功")
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 点击订购商品
			buyByShopcar:function(){
				buyByShopcar({
					addressId: 1,
					cartIdList: this.cartIdList,
					memberId: uni.getStorageSync("memberId")
				}).then(res => {
					if(res.data.code == 200) {
						console.log(res)
						uni.navigateTo({
							url: '/pagesA/pages/groceryStore/orderDetial/orderDetial'
						})
					} else{
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 删除商品
			deleteCommodity:function(){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '是否删除商品？',
				    success: function (res) {
				        if (res.confirm) {
				           // 假如是全选
				           if(that.checked == true){
				           	deleteAllCommodity(uni.getStorageSync("memberId")).then(res => {
				           		if(res.data.code == 200) {
				           			uni.showToast({
				           				title: '删除成功'
				           			})
				           			that.getShopcarList()
									that.checked = false
				           		} else {
				           			uni.showToast({
				           				title: '网络错误',
				           				icon: 'none'
				           			})
				           		}
				           	})
				           } else {
				           	if(that.result.length != 0) {
				           		deleteSomeCommodity(uni.getStorageSync("memberId"),that.cartIdList).then(res => {
				           			if(res.data.code == 200) {
				           				uni.showToast({
				           					title: '删除成功'
				           				})
				           				that.getShopcarList()
				           			} else {
				           				uni.showToast({
				           					title: '网络错误',
				           					icon: 'none'
				           				})
				           			}
				           		})
				           	} else{
				           		uni.showToast({
				           			title: '请选择删除的商品',
				           			icon: 'none'
				           		})
				           	}
				           }
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		},
		onLoad() {
			this.getShopcarList()
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.checkbox-card-box {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
	}

	.card-box {
		width: 55%;
		border-bottom: 1px solid #E2E2E2;
	}

	.checkbox-box {
		width: 10%;
		position: relative;
		margin-left: 5%;
	}

	.checkbox-box van-checkbox {
		position: absolute;
		top: 50%;
		transform: rotateY(-50%);
		left: 4%;
	}

	/* 右侧的右上角的价钱和右下角的步进器 */
	.stepper-box {
		width: 30%;
		position: relative;
		border-bottom: 1px solid #E2E2E2;
	}

	.stepper-box text {
		position: absolute;
		right: 40rpx;
		color: red;
		top: 20rpx;
	}

	.stepper-box van-stepper {
		position: absolute;
		bottom: 30rpx;
	}
</style>
